<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="pro-cate-area">
    <!-- 商品类别-属性-start -->
    <div class="pro-cate-attr clearfix">
        <div class="p-title">区域：</div>
        <div class="p-default">
            <ul>
                <li id="area"><a href="javascript:guideSearch('area','');">全部</a></li>
                <!--<li class="selected"><a href="javascript:;">全部</a></li>-->
            </ul>
        </div>
        <!-- 二级虚拟分类 -->
        <div class="p-values">

            <div class="p-expand">
                <ul class="clearfix">
                    <li id="area420102"><a href="javascript:guideSearch('area',420102);">江岸</a></li>
                    <li id="area420103"><a href="javascript:guideSearch('area',420103);">江汉</a></li>
                    <li id="area420104"><a href="javascript:guideSearch('area',420104);">硚口</a></li>
                    <li id="area420105"><a href="javascript:guideSearch('area',420105);">汉阳</a></li>
                    <li id="area420106"><a href="javascript:guideSearch('area',420106);">武昌</a></li>
                    <li id="area420107"><a href="javascript:guideSearch('area',420107);">青山</a></li>
                    <li id="area420111"><a href="javascript:guideSearch('area',420111);">洪山</a></li>
                    <li id="area420112"><a href="javascript:guideSearch('area',420112);">东西湖</a></li>
                    <li id="area420113"><a href="javascript:guideSearch('area',420113);">汉南</a></li>
                    <li id="area420114"><a href="javascript:guideSearch('area',420114);">蔡甸</a></li>
                    <li id="area420115"><a href="javascript:guideSearch('area',420115);">江夏</a></li>
                    <li id="area420116"><a href="javascript:guideSearch('area',420116);">黄陂</a></li>
                    <li id="area420117"><a href="javascript:guideSearch('area',420117);">新洲</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 商品类别-属性-end -->

    <div class="pro-cate-attr clearfix">
        <div class="p-title">售价：</div>
        <div class="p-default">
            <ul>
                <li id="price"><a href="javascript:guideSearch('price','');">全部</a></li>
            </ul>
        </div>
        <div class="p-values">
            <div class="p-expand">
                <ul class="clearfix">
                    <li id="price0-30"><a href="javascript:guideSearch('price','0-30');">30万以下</a></li>
                    <li id="price30-40"><a href="javascript:guideSearch('price','30-40');">30-40万</a></li>
                    <li id="price40-50"><a href="javascript:guideSearch('price','40-50');">40-50万</a></li>
                    <li id="price50-60"><a href="javascript:guideSearch('price','50-60');">50-60万</a></li>
                    <li id="price60-80"><a href="javascript:guideSearch('price','60-80');">60-80万</a></li>
                    <li id="price80-100"><a href="javascript:guideSearch('price','80-100');">80-100万</a></li>
                    <li id="price100-120"><a href="javascript:guideSearch('price','100-120');">100-120万</a></li>
                    <li id="price120-150"><a href="javascript:guideSearch('price','120-150');">120-150万</a></li>
                    <li id="price150-200"><a href="javascript:guideSearch('price','150-200');">150-200万</a></li>
                    <li id="price200-"><a href="javascript:guideSearch('price','200-');">200万以上</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="pro-cate-attr clearfix">
        <div class="p-title">面积：</div>
        <div class="p-default">
            <ul>
                <li id="size"><a href="javascript:guideSearch('size','')">全部</a></li>
            </ul>
        </div>
        <div class="p-values">
            <div class="p-expand">
                <ul class="clearfix">
                    <li id="size0-50"><a href="javascript:guideSearch('size','0-50');">50平米以下</a></li>
                    <li id="size50-70"><a href="javascript:guideSearch('size','50-70');">50-70平米</a></li>
                    <li id="size70-90"><a href="javascript:guideSearch('size','70-90');">70-90平米</a></li>
                    <li id="size90-120"><a href="javascript:guideSearch('size','90-120');">90-120平米</a></li>
                    <li id="size120-150"><a href="javascript:guideSearch('size','120-150');">120-150平米</a></li>
                    <li id="size150-200"><a href="javascript:guideSearch('size','150-200');">150-200平米</a></li>
                    <li id="size200-300"><a href="javascript:guideSearch('size','200-300');">200-300平米</a></li>
                    <li id="size300-"><a href="javascript:guideSearch('size','300-');">300平米以上</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="pro-cate-attr clearfix">
        <div class="p-title">房型：</div>
        <div class="p-default">
            <ul>
                <li id="room"><a href="javascript:guideSearch('room','');">全部</a></li>
            </ul>
        </div>
        <div class="p-values">
            <div class="p-expand">
                <ul class="clearfix">
                    <li id="room0-1"><a href="javascript:guideSearch('room','0-1');">一室</a></li>
                    <li id="room1-2"><a href="javascript:guideSearch('room','1-2');">二室</a></li>
                    <li id="room2-3"><a href="javascript:guideSearch('room','2-3');">三室</a></li>
                    <li id="room3-4"><a href="javascript:guideSearch('room','3-4');">四室</a></li>
                    <li id="room4-5"><a href="javascript:guideSearch('room','4-5');">五室</a></li>
                    <li id="room5-"><a href="javascript:guideSearch('room','5-');">五室以上</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 商品类别-排序-start -->
    <div class="pro-cate-sort clearfix">
        <div class="p-title">排序：</div>
        <div class="p-default">
            <ul>
                <li id="sort-default"><a href="javascript:clearOrderby();">默认</a></li>
            </ul>
        </div>
        <div class="p-values">
            <div class="p-expand">
                <ul class="clearfix">
                    <!-- 升序选择（从低到高）： sort-asc selected   降序选择（从高到低）： sort-desc selected -->

                    <li id="sort-registterTime"><a href="javascript:guideOrderBy('orderby-size');" class="sort-added">面积<s></s></a></li>
                    <li id="sort-price"><a href="javascript:guideOrderBy('orderby-price');" class="sort-price" >价格<s></s></a></li>

                </ul>
            </div>
        </div>
    </div>
    <!-- 商品类别-排序-end -->
    <form id="guideForm">
        <input type="hidden" name="keywords" value="${param.keywords}"/>
        <input type="hidden" name="area_id" value="${param.area_id}"/>
        <input type="hidden" name="price" value="${param.price}"/>
        <input type="hidden" name="house_size" value="${param.house_size}"/>
        <input type="hidden" name="room" value="${param.room}"/>
        <input type="hidden" name="orderbySize" value="${param.orderbySize}"/>
        <input type="hidden" name="orderbyPrice" value="${param.orderbyPrice}"/>
    </form>

    <script>
        function guideSearch(name, val) {
            if (name == 'area') {
                $("input[name=area_id]").val(val);
            }
            if (name == 'price') {
                $("input[name=price]").val(val);
            }
            if (name == 'size') {
                $("input[name=house_size]").val(val);
            }
            if (name == 'room') {
                $("input[name=room]").val(val);
            }
            var param = $("#guideForm").serialize();
            location.href="${ctx}/guide.htm?"+param;
        }

        function guideOrderBy(name){
            if(name=='orderby-size'){
                $("input[name=orderbySize]").val(convertOrderby('${param.orderbySize}'));
                $("input[name=orderbyPrice]").val("");
            }
            if(name=='orderby-price'){
                $("input[name=orderbySize]").val("");
                $("input[name=orderbyPrice]").val( convertOrderby('${param.orderbyPrice}'));
            }
            guideSearch(null,null);
        }
        function clearOrderby(){
            $("input[name=orderbySize]").val("");
            $("input[name=orderbyPrice]").val("");
            guideSearch(null,null);
        }

        $(function(){
            $("#area${param.area_id}").addClass("selected");
            $("#price${param.price}").addClass("selected");
            $("#size${param.house_size}").addClass("selected");
            $("#room${param.room}").addClass("selected");

            <c:if test="${myfn:isNotBlank(param.orderbySize)}">
            $("#sort-registterTime").addClass("sort-${param.orderbySize} selected")
            </c:if>
            <c:if test="${myfn:isNotBlank(param.orderbyPrice)}">
            $("#sort-price").addClass("sort-${param.orderbyPrice} selected")
            </c:if>

            <c:if test="${!myfn:isNotBlank(param.orderbyPrice) && !myfn:isNotBlank(param.orderbySize)}">
            $("#sort-default").addClass("selected");
            </c:if>
        });

        function convertOrderby(orderBy){
            if(orderBy==null||orderBy==""){
                return "asc";
            }
            if(orderBy=='asc')return "desc";
            if(orderBy=='desc')return "asc";
        }

    </script>

</div>

